<template>
  <div id="box">
    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <router-link to="/search"> <button>查看搜索历史记录</button></router-link>

    <van-tabs v-model="active" @click="change">
      <van-tab
        v-for="item in cate"
        :name="item._id"
        :key="item._id"
        :title="item.title"
      ></van-tab>
    </van-tabs>
    <div class="price">
      价格 <van-icon name="arrow-up" @click="up" />
      <van-icon name="arrow-down" @click="down" />
    </div>

    <div id="wrap" @scroll="scr" ref="wrap">
      <ul class="content">
        <child  v-for="item in list" :key="item._id" :item="item" @showdiv="showDialog"></child>
      </ul>
    </div>
    <van-popup v-model="show" :style="{ height: '50%', width: '70%' }">
      <div>
        <img :src="listItem.pic" alt="" style="width:100%; height:200px;" />
        <p>{{ listItem.title }}</p>
        <p>价格是{{ listItem.price }}</p>
        <button @click="addshop">加入购物车</button>
      </div>
    </van-popup>

    <div id="totop" v-show="showtop" @click="totop">
      <van-icon name="arrow-up" />
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { Toast } from 'vant';

Vue.use(Toast);
import child from "../components/child.vue";
export default {
  components: { child },
  data() {
    return {
      value: "",
      cate: [],
      active: "59f1e1ada1da8b15d42234e9",
      list: [],
      show: false,
      listItem: "",
      showtop: false,
      history: JSON.parse(localStorage.getItem("history")) || [],
    };
  },
  mounted() {
    this.getCate();
    this.change(this.active);
  },
  methods: {
    getCate() {
      this.$axios.get("/fenlei.json").then((res) => {
        console.log(res);
        this.cate = res.data.result;
      });
    },
    change(val) {
      this.list = [];
      //   console.log(val);
      this.$axios.get("/list.json").then((res) => {
        // console.log(res);
        res.data.result.forEach((item) => {
          if (item.cid == val) {
            // console.log(item.cid);
            this.list.push(item);
            // console.log(this.list);
          }
        });
      });
    },
    //标签页的点击事件是绑定在父级tabs身上的，默认的有一个参数 是 active 的值

addshop(){
  console.log(1);
  this.show=false;
  Toast.success('添加成功');
},

    up() {
      this.list.sort((a, b) => {
        return a.price - b.price;
      });
    },
    //
    down() {
      this.list.sort((a, b) => {
        return b.price - a.price;
      });
    },
    //对价格进行排序

    showDialog(item) {
      this.show = true;
      this.listItem = item;
      //   console.log(item.title)
      //点击购物车按钮时候 显示弹窗
      //   把当前点击商品的信息作为参数传递过来 并保存在变量中
      //并在弹窗中展示商品的信息
    },

    scr() {
      // var wrap=document.getElementById("wrap")
      // console.log(this.$refs.wrap.scrollTop);
      //通过ref拿到节点 拿到这个元素被卷进去的距离
      if (this.$refs.wrap.scrollTop > 0) {
        this.showtop = true;
      } else {
        this.showtop = false;
      }
      //如果是第一屏时候就不显示回到顶部的按钮
    },
    // 当内容区域执行滚动事件时触发
    totop() {
      var timer = null;
      timer = setInterval(() => {
        this.$refs.wrap.scrollTop -= 5;
        if (this.$refs.wrap.scrollTop <= 0) {
          clearInterval(timer);
        }
      }, 1);
    },
    //用计时器实现每毫秒让这个wrap 元素的卷进去的距离减5 直到减到0的时候清除计时器

    onSearch() {
      this.history.unshift(this.value);
      localStorage.setItem("history", JSON.stringify(this.history));
      this.cate.forEach((item) => {
        if (item.title.includes(this.value)) {
          this.active = item._id;
          this.change(this.active);
        }
      });
    },
    //当按下搜索时 对分类数据进行搜索，如果包含的有搜索关键字 就把id存给active 执行change方法 让列表跟着改变
  },
};

// ref 是vue中拿到元素的方法 相当于是原生的getelementbyid
</script>
<style lang="scss">
#box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
#wrap {
  //   height: 100%;
  width: 100%;
  overflow-y: scroll;
  flex: 1;
}
.content {
  padding: 0px 10px;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  > li {
    width: 48%;
    background: #ccc;
    padding: 30px 20px;
    box-sizing: border-box;
    margin-top: 30px;
    position: relative;
    img {
      width: 100%;
      height: 200px;
    }
  }
  .shopicon {
    position: absolute;
    bottom: 5px;
    right: 5px;
  }
}
.price {
  margin-top: 10px;
}
#totop {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 50%;
  position: fixed;
  right: 10px;
  bottom: 10px;
  border: 2px solid pink;
  background: greenyellow;
}
</style>
